<!--
 * @Date: 2020-08-07 11:30:21
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-09-24 17:40:08
 * @Description: 一级按钮  管理二级按钮和自身状态  提供v-model来显示show的问题 但是还有选中的问题
-->

<template>
  <div class="bmp-first-menu-content">
    <div
      class="text-background"
      :class="currSelect?'text-background-selected':'text-background-unselected'"
      @click="togShow"
    >
      <baseOverFlowText :text="text"></baseOverFlowText>
      <transition name="fade" mode="out-in" appear>
        <div class="second-menus-content" v-show="currShow">
          <bmpSecondMenus :menuInfos="childs" v-model="currSelect" ref="secondMenuBtns"></bmpSecondMenus>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import baseOverFlowText from '@/components/Base/baseOverFlowText.vue'
import bmpSecondMenus from './bmpSecondMenus.vue'
export default {
  data () {
    return {
      // 当前维护的 show 的状态 show的时候显示二级菜单 点击的时候
      currShow: false,
      // 维护当前选中的问题
      currSelect: false
    }
  },
  components: { baseOverFlowText,
    bmpSecondMenus },
  provide () {
    return {
      firstTag: this.tag
    }
  },
  watch: {
    currShow: {
      handler (nv) {
        this.$emit('changeShow', nv, this.tag)
      },
      immediate: true
    },
    show: {
      handler (nv) {
        this.currShow = nv
      },
      immediate: true
    },
    currSelect: {
      handler (nv) {
        this.$emit('changeSelect', nv, this.tag)
      },
      immediate: true
    }
  },
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    tag: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    },
    childs: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    // 改变show的状态
    togShow (type) {
      if (typeof type !== 'boolean') {
        this.currShow = !this.currShow
      } else {
        this.currShow = type
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.bmp-first-menu-content {
  height: 100%;
  .text-background {
    height: 100%;
    width: 100%;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 28px;
    letter-spacing: 1px;
    background-size: 100% 100%;
    ::v-deep .baseOverFlowContent {
      margin-left: 10%;
      width: 80%;
    }
    ::v-deep .baseOverFlow {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .text-background-selected {
    // background-image: url('~@/assets/menuicon/select1.png');
  }
  .text-background-unselected {
    // background-image: url('~@/assets/menuicon/unselect1.png');
  }
  .second-menus-content {
    position: absolute;
    // 这个3 根据图片修正的  144也是写死的
    top: 3px;
    left: 50%;
    transform: translate(calc(-50%), calc(-100%));
    width: 144px;
    background: rgba(0, 0, 0, 0.6);
  }
}
</style>
